<template>
	
	<div class="bigBox">
		<!--banner-->
		<div>
		     <swiper height="210px" :loop='true' auto :list="newBanner" v-model="demo01_index" @on-index-change="demo01_onIndexChange"></swiper>
	    </div>
	    
	    <!--导航图标-->
		<div id="center">
			<flexbox>
		      <flexbox-item v-for="(item,index) in iconList" style="padding-top: 0.5rem;">
		      	<div @click="toRecommend(index)" class="flex-demo" >
		      		
		      		<img :src="item.logo" style="width: 2rem;"/>
		      		
			        
			        <div style="font-size: 1rem;">{{item.name}}</div>
			          	
			    </div>
		      </flexbox-item>
		      
		    </flexbox>
		</div>
		
		<!--免费专栏-->
		
		<div class="free">
			<div class="free_top" style="color: #66296D;">免费专栏</div>
			<div class="free_center" @click="toFree(index)" v-for="(item,index) in freeSectionList"> 
				<flexbox>
				<flexbox-item><div >
					<img class="userImg" :src="item.image" />
					<span>{{item.name}}</span>
				</div></flexbox-item>
	            <flexbox-item><div style="text-align: right;">
	            	<span style="color: #6C6A6B;font-size: 0.9rem;">查看全部</span>
	            	<!--<img style="width: 12px;height: 12px;" src="../../static/image/icon-balance-right.png" />-->
	            </div></flexbox-item>
				</flexbox>
				<div  v-for="name in item.section">
					<span class="iconfont icon-bofang1"></span>
					<span style="color: #6C6A6B;font-size: 0.9rem;">{{name.title}}</span>
				</div>
			</div>
			
			
		</div>
		
		
		<!--课程专栏-->
		<div class="column">
			<div class="column_top" @click="toCoulumn()">
				<flexbox>
				<flexbox-item><div style="color: #66296D;">课程专栏</div></flexbox-item>
	            <flexbox-item><div style="text-align: right;color: #6C6A6B;font-size: 0.9rem;"><span>查看全部</span></div></flexbox-item>
				</flexbox>
			</div>
			<div v-for="(item,index) in lesson_list" @click="toClassList(index)">
				<div class="column_img" >
					<img :src="item.cover_pic"/>
				</div>
				<div class="column_bottom">
					<flexbox >
				      <flexbox-item :span="8"><div class="flex-demo">
				      	<flexbox>
					      <flexbox-item :span="9"><div class="flex-demo" style="text-align: left;padding-left:0.5rem;">
					      	<flexbox>
							    <flexbox-item :span="2"><div class="flex-demo"><img class="userImg" :src="item.image"/></div></flexbox-item>
							    <flexbox-item><div class="flex-demo" style="text-align: left;"><div class="f15" style="font-size: 0.9rem;width: 10.5rem;overflow: hidden;height: 1.5rem;">{{item.name}}</div></div></flexbox-item>
							</flexbox>
					      </div></flexbox-item>
					      <flexbox-item><div class="flex-demo" style="text-align: right;color: #6C6A6B;font-size: 0.9rem;">第{{item.stage}}节</div></flexbox-item>
					    </flexbox>
				      </div></flexbox-item>
				      <flexbox-item><div class="flex-demo" style="color:#910A81 ;font-size: 0.9rem;">￥199/年</div></flexbox-item>
				    </flexbox>
				    <flexbox>
				      <flexbox-item :span="8"><div style="padding-top: 5px;padding-left: 0.5rem;">
				      	{{item.title}} 
				      </div></flexbox-item>
				      <flexbox-item>
				      	<div class="flex-demo section" v-if="item.total_lesson !=0">共{{item.total_lesson}}节</div>
				      	<div class="flex-demo section" v-else>无限集</div>
				      </flexbox-item>
				    </flexbox>
				    <div style="padding-left: 0.5rem;margin-top: 0.5rem;color: #C7C7C7;font-size: 0.9rem;">
				    	<span>{{item.showtime}}更新</span>
				        <span style="margin-left: 20px;">时长：{{item.length_time}}</span>
				    </div>
				    
				</div>
			</div>
			
		</div>
		
		
		<!--影视启示-->
		<div class="column">
			<div class="column_top" @click="toMovies">
				<flexbox>
				<flexbox-item><div style="color: #66296D;">影视启示</div></flexbox-item>
	            <flexbox-item><div style="text-align: right;color: #6C6A6B;font-size: 0.9rem;"><span>查看全部</span></div></flexbox-item>
				</flexbox>
			</div>
			<div v-for="(item,index) in film_section" @click="toMoviesList(index)">
				<div class="column_img" >
					<img :src="item.cover_pic"/>
				</div>
				<div class="column_bottom">
					<flexbox >
				      <flexbox-item :span="8"><div class="flex-demo">
				      	<flexbox>
					      <flexbox-item :span="8">
					      	<div class="flex-demo" style="text-align: left;padding-left: 0.5rem;">
						      	<flexbox>
							      <flexbox-item :span="2"><div class="flex-demo"><img class="userImg" :src="item.image"/></div></flexbox-item>
							      <flexbox-item><div class="flex-demo" style="text-align: left;"><div class="f15" style="font-size: 0.9rem;width: 10.5rem;overflow: hidden;height: 1.5rem;">{{item.name}}</div></div></flexbox-item>
							    </flexbox>
						    </div>
					      </flexbox-item>
					      <flexbox-item><div class="flex-demo" style="text-align: right;color: #6C6A6B;font-size: 0.9rem;">第{{item.stage}}节</div></flexbox-item>
					    </flexbox>
				      </div></flexbox-item>
				      <flexbox-item><div class="flex-demo" style="color:#910A81 ;font-size: 0.9rem;">免费</div></flexbox-item>
				    </flexbox>
				    <flexbox >
				      <flexbox-item :span="8"><div style="padding-top: 5px;padding-left: 0.5rem;">
				      	{{item.title}}
				      </div></flexbox-item>
				      <flexbox-item><div class="flex-demo section"></div></flexbox-item>
				    </flexbox>
				    <div style="padding-left: 0.5rem;margin-top: 0.5rem;color: #C7C7C7;font-size: 0.9rem;">
				    	<span>{{item.showtime}}更新</span>
				        <span style="margin-left: 20px;">时长：{{item.length_time}}</span>
				    </div>
				    
				</div>
			</div>
			
		</div>
		
		
		<!--问道专栏-->
		<div class="column">
			<div class="column_top" @click="toWendao()">
				<flexbox>
				<flexbox-item><div style="color: #66296D;">问道专栏</div></flexbox-item>
	            <flexbox-item><div style="text-align: right;color: #6C6A6B;font-size: 0.9rem;"><span>查看全部</span></div></flexbox-item>
				</flexbox>
			</div>
			<div v-for="(item,index) in wendaoList" @click="toWendaoList(index)">
				<div class="column_img" >
					<img :src="item.cover_pic"/>
				</div>
				<div class="column_bottom">
					<flexbox >
				      <flexbox-item :span="8"><div class="flex-demo">
				      	<flexbox>
					      <flexbox-item :span="9"><div class="flex-demo" style="text-align: left;padding-left:0.5rem;">
					      	<flexbox>
							    <flexbox-item :span="2"><div class="flex-demo"><img class="userImg" :src="item.image"/></div></flexbox-item>
							    <flexbox-item><div class="flex-demo" style="text-align: left;"><div class="f15" style="font-size: 0.9rem;width: 10.5rem;overflow: hidden;height: 1.5rem;">{{item.name}}</div></div></flexbox-item>
							</flexbox>
					      </div></flexbox-item>
					      <flexbox-item><div class="flex-demo" style="text-align: right;color: #6C6A6B;font-size: 0.9rem;">第{{item.stage}}节</div></flexbox-item>
					    </flexbox>
				      </div></flexbox-item>
				      <flexbox-item><div class="flex-demo" style="color:#910A81 ;font-size: 0.9rem;">￥199/年</div></flexbox-item>
				    </flexbox>
				    <flexbox>
				      <flexbox-item :span="8"><div style="padding-top: 5px;padding-left: 0.5rem;">
				      	{{item.title}} 
				      </div></flexbox-item>
				      <flexbox-item>
				      	<div class="flex-demo section" v-if="item.total_lesson != 0">共{{item.total_lesson}}节</div>
				      	<div class="flex-demo section" v-else>无限集</div>
				      </flexbox-item>
				    </flexbox>
				    <div style="padding-left: 0.5rem;margin-top: 0.5rem;color: #C7C7C7;font-size: 0.9rem;">
				    	<span>{{item.showtime}}更新</span>
				        <span style="margin-left: 20px;">时长：{{item.length_time}}</span>
				    </div>
				    
				</div>
			</div>
			
		</div>
		
		
		
		<tab></tab>
	</div>
	
	
	
	
	

	
	
</template>

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<script>
	import { Swiper, GroupTitle, SwiperItem, XButton, Divider ,base64} from 'vux'
	import wx from 'weixin-js-sdk'

	export default {
		
		components: {
		    Swiper,
		    SwiperItem,
		    GroupTitle,
		    XButton,
		    Divider,
		    base64
		  },
	
	    data () {
	    	return {
	    		
	    		selfHref:'',
	    		parentId:'',
		        
			    demo01_index: 0,
			    bannerList:'',
			    film_section:[],
			    freeSectionList:[],
			    lesson_list:[],
			    access_token:'',
			    iconList:'',
			    wendaoList:'',
			      
			    newBanner:[],
			      
			    appId:'',
			    nonceStr:'',
				pacKage:'',
				paySign:'',
				signType:'',
				timeStamp:'',
				
				shareUrl:'',
				jumpurl:'https://newzhouzi.fxm365.com/addons/zjhj_mall/core/web/index.php?store_id=1&r=api/web-wechat-login/userinfo'
		    }

	    },
	    methods: {
	    	
	    	demo01_onIndexChange(index){
	    		
	    	},
	    	
		    //获取首页详情
		    getDetail(){
		    	
		    	
		    	this.$store.commit('updateLoadingStatus',true);
		    	
		    	this.$http.get(this.$store.state.api + 'index/index&access_token=' + this.access_token)
		    	.then((response) => {
		    		
		    		console.log(response)
		    		console.log(response.body.data.banner_list)
				
				if(response.body.code == 0) {
					this.bannerList = response.body.data.banner_list,
					this.film_section = response.body.data.film_section,
					this.freeSectionList = response.body.data.freeSectionList,
					this.lesson_list = response.body.data.lesson_list
					
					for(var i = 0 ; i < response.body.data.banner_list.length ; i ++){
						
						var bannerObj = {};
						
						bannerObj.img = this.bannerList[i].pic_url;
//						bannerObj.url = this.bannerList[i].page_url
						this.newBanner.push(bannerObj)
						
					}
					console.log(this.newBanner)
					console.log(this.bannerList)
					console.log(this.freeSectionList)
					console.log(this.lesson_list)
					console.log(this.film_section)
					
				} else {
					
				}
				
			    this.$store.commit('updateLoadingStatus',false);
			    
				}, (response) => {
	                 
	                 
				});
		    },
		    
		    //获取人物信息
		    getUser(){
		    	
		    	this.$store.commit('updateLoadingStatus',true);
		    	
		   	
			   	this.$http.get(this.$store.state.api + 'userdd/vip-index&access_token=' + this.access_token)
		    	.then((response) => {
		    		
		    		console.log(response)
				
				if(response.body.code == 0) {
					
					this.parentId = response.body.data.user_info.id
					
					
				} else {
					
				}
				
				
				
				this.$store.commit('updateLoadingStatus',false);
				
				
				}, (response) => {
	                 
	                 
				});
				
		    },
		
		    
		    //获取导航栏详情
		    getIconDetail(){
		    	
		    	this.$store.commit('updateLoadingStatus',true);
		    	
		    	this.$http.get(this.$store.state.api + 'index/menu&access_token=' + this.access_token)
		    	.then((response) => {
		    		
		    		console.log(response)
		    		
				
				if(response.body.code == 0) {
					
					this.iconList = response.body.data
					
				} else {
					
					
				}
				
				this.$store.commit('updateLoadingStatus',false);
				
				
			    }, (response) => {
	             
	             
			    });
		    },
		    
		    //获取问道详情
		    getWendaoDetail(){
		    	
		    	this.$store.commit('updateLoadingStatus',true);
		    	
		    	this.$http.get(this.$store.state.api + 'index/wendao&access_token=' + this.access_token)
		    	.then((response) => {
		    		
		    		console.log(response)
		    		
				
				if(response.body.code == 0) {
					
					this.wendaoList = response.body.data.wendao_list
					
					console.log(this.wendaoList)
					
				} else {
					
					
				}
				
				this.$store.commit('updateLoadingStatus',false);
				
				
			    }, (response) => {
	             
	             
			    });
		    },
		    
		    //跳转到问道专栏
		    toWendao(){
		    	
		    	this.$router.push({ path: '/wendao',name:'wendao'});
		    	
		    },
		    
		    //跳转到问道列表
		    toWendaoList(index){
		    	
		    	console.log(index)
		    	var id = this.wendaoList[index].id
		    	
		    	this.$router.push({ path: '/wendaoList',name:'wendaoList',params:{lesson_id:id}});
		    	
		    },
		    
	
		//跳转到免费列表
		toFree:function(index){
			console.log(index)
			
			this.$router.push({ path: '/free',name:'free',params:{lesson_id:this.freeSectionList[index].id}});
		},
		
		//跳转到课程专栏列表
		toCoulumn:function(){
			this.$router.push({ path: '/coulumn'});
		},
		
		//跳转到课程列表
		toClassList(index){
			
			var lesson_id = this.lesson_list[index].id
			
			this.$router.push({ path: '/classList',name:'classList',params:{lesson_id:lesson_id}});
			
		},
		
		//跳转到影视
		toMovies(){
			this.$router.push({ path: '/movies'});
		},
		
		//跳转到影视列表
		toMoviesList(index){
			this.$router.push({ path: '/moviesList',name:'moviesList',params:{lesson_id:this.film_section[index].id}});
		},
		
		//导航栏跳转
		toRecommend(index){
			
			console.log(index)
			if(index == 0){
				this.$router.push({ path: '/freeList'});
			}else if(index == 1){
				
				this.$router.push({ path: '/coulumn'});
				
			}else if(index == 2){
				
				this.$router.push({ path: '/movies'});
				
			}else if(index == 3){
				
				this.$router.push({ path: '/audios'});
				
			}else if(index == 4){
				
				this.$router.push({ path: '/wendao'});
				
			}
		},
		
		
		
		//获取消息详情
	    getNewsDetail(){
	    	
	    	this.$store.commit('updateLoadingStatus',true);
	    	
	    	this.$http.get(this.$store.state.api + 'message/msg&access_token=' + this.access_token)
	    	.then((response) => {
	    		
	    		console.log(response)
	    		
			
			if(response.body.code == 0) {
				
				this.$store.state.bage = response.body.data.count;
				
				
				
			} else {
				
			}
			
			this.$store.commit('updateLoadingStatus',false);
			
			
			
		    }, (response) => {
             
             
		    });
	    },
	    

		//获取地址栏信息
		getUrlStr(name){
			

	      let reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)","i");
	      if(reg.test(window.location.href)){
	        return unescape(RegExp.$2.replace(/\+/g," "))
	      }
	      return undefined
	    },
	    

		      
   },
		  
		  
        mounted() {
         
         
          
           var access_token = this.getUrlStr('access_token');
           var parentId = this.getUrlStr('parent_id');
           
            if(parentId == undefined){
              parentId = 0;
           }
           
           var uid = this.getUrlStr('uid');
           
           console.log(parentId.toString().indexOf('?'));
           
           if(parentId.toString().indexOf('?') > 0){
           	 parentId = parentId.split('?')[0];
           }
           
           
           var locurl = location.href;
           locurl = base64.encode(locurl.split('?')[0]);        
          
          
       
           if(access_token != undefined){
         
              localStorage.setItem("access_token",access_token); 
              localStorage.setItem("parent_id",this.getUrlStr('uid'));


           }
           
            if(localStorage.getItem('access_token') != null){
         
              this.$root.registerjudge();
              this.$root.getShare();
              
            }else{
            	
            	console.log(222);
        	  this.$root.gotoWechat(locurl,parentId);
            }
           
       
         
    	   this.access_token = localStorage.getItem('access_token');
		
	     
		   this.getDetail();
		   this.getIconDetail();
		   this.getWendaoDetail();
		   this.getNewsDetail();
		   this.getUser();
		   this.getuserInfo
			
		},
			
		beforeMount(){
			
			
			
		}
	
		  
		  
	}
	
	
			
</script>

<style>
	
	* {
	    margin: 0;
	    padding: 0;
	    list-style: none;
	  }
	  
	.bigBox{
		background-color: #E7E7E7;
		padding-bottom: 3.33rem;
	}
	  
	.flex-demo {
		text-align: center;
		background-clip: padding-box;
    }
    
    #center{
    	/*margin-top: 0.5rem;*/
    	background-color: #FFFFFF;
    }
    .free{
    	background-color: #FFFFFF;
    	margin-top: 0.5rem;
    	/*padding-left: 0.5rem;*/
    }
    .free_top{
    	color: #B087B4;
    	/*border-bottom: solid 1px #e3e3e3;*/
    	/*padding-left: 0.5rem;*/
    	padding: 5px 0.5rem;
    	background: #C3C3C3;
    }
    .free_center{
    	/*padding-left: 0.5rem;*/
    	border-top: solid 1px #e3e3e3;
    	padding: 5px 0.5rem 0 0.5rem;
    }
    .free_bottom{
    	padding: 5px 0.5rem;
    }
    .column_img img{
    	width: 100%;
    }
    .userImg{
    	width: 2rem;
    	height: 2rem;
    	border-radius: 50%;
    }
	.f15{
		font-size: 12px;
		color: #6C6A6B;
	}
	.padT19{
		padding-top: 19px;
		text-align: right;
		color: #6C6A6B;
		font-size: 0.9rem;
	}
	.section{
		background: #910A81;
	    border-radius: 50%;
	    width: 80%;
	    margin: auto;
	    color: #FFFFFF;
	    font-size: 0.9rem;
	}
	.column_top{
		border-bottom: solid 1px #e3e3e3;
    	/*padding-left: 0.5rem;*/
    	padding: 5px 0.5rem;
    	background: #C3C3C3;
	}
	.column{
		margin-top: 0.5rem;
		background: #FFFFFF;
	}
	.column_bottom{
		/*padding-left: 0.5rem;*/
	}
</style>